<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电动计时仪</title>
    <link rel="stylesheet" type="text/css" href="./common.css" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
  </head>
  <body>
    <div class="page flex-col">
      <div class="box1 flex-col">
        <div class="bd1 flex-col">
          <div class="mod1 flex-col"></div>
          <div class="mod2 flex-row">
            <div class="timing">
              <span id="span1">00</span>:<span id="span2">00</span>:<span id="span3">00</span>.<span id="span4">000</span>
              <div class="timing_btn">
                <button type="button" class="btn" value="start" onclick="openCamera()">开始摄像</button>
                <button type="button" class="btn" value="clear" onclick="stopCamera()">停止摄像</button>

                <button type="button" id="input1" class="btn" value="start" onclick="whenClick()">开始</button>
                <button type="button"  id="input2" class="btn" value="clear" onclick="clear1()">清零</button>
              </div>
            </div>
            <div class="wrap2 flex-col">
            </div>
            <div class="wrap3 flex-col">
            </div>
            <div class="wrap4 flex-col">
            </div>
            <div class="wrap5 flex-col">
            </div>
            <div class="wrap6 flex-col">
            </div>
            <div class="wrap7 flex-col">
            </div>
            <div class="wrap8 flex-col">
            </div>
            <div class="wrap9 flex-col">
            </div>
        </div>
          <div class="mod3 flex-col"></div>
        </div>
        <div class="bd3 flex-col">
          <div class="layer2 flex-row">
            <div class="layer3 flex-col">
              <div class="activity_list">
                <label class="activity_txt">赛事选择:</label>
                <div class="activity_item">
                  <select name="activity" id="activity" class="form-control" >
                    <option value="0" class="activity_option">请选择赛事</option>
                    <option value="1" class="activity_option">男子百米预选赛1</option>
                    <option value="2" class="activity_option">男子百米预选赛2</option>
                  </select>
                </div>
              </div>
              <div class="mod6 flex-row justify-between">
              </div>
            </div>
            <img
              class="img6"
              referrerpolicy="no-referrer"
              src="./img/pslvkjmu7gfmu6tir5sx3aovbs7mn79nufee303546-9f9a-4a2a-9438-b7e2a9a1de0a.png"
            />
              <div class="layer17 flex-col">

                  <div class="section10 flex-col">
                    <span class="word37">名次排序</span>
                  </div>
                  <div class="section11 flex-row justify-between">
                    <div class="layer18 flex-col" style="width: 100%"></div>
                  </div>
                <table class="table" id="list">
                  <thead>
                  <tr>
                    <th>赛道</th>
                    <th>选手</th>
                    <th>成绩</th>
                    <th style="display: none;">赛事</th>
                  </tr>
                  </thead>
                  <tbody id="rankList">
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">1</td>
                    <td class="track">/</td>
                    <td id="rank0_1" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">2</td>
                    <td class="track">/</td>
                    <td id="rank0_2" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">3</td>
                    <td class="track">/</td>
                    <td id="rank0_3" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">4</td>
                    <td class="track">/</td>
                    <td id="rank0_4" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">5</td>
                    <td class="track">/</td>
                    <td id="rank0_5" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">6</td>
                    <td class="track">/</td>
                    <td id="rank0_6" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">7</td>
                    <td class="track">/</td>
                    <td id="rank0_7" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">8</td>
                    <td class="track">/</td>
                    <td id="rank0_8" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  </tbody>
                </table>
                  <div class="gif_list">
                    <div class="gif_item">
                      <div class="layer29 gif_css">
                      </div>
                      <div class="gif_txt">
                        退出判读
                      </div>
                    </div>
                    <div class="gif_item">
                      <div class="layer30 gif_css">
                      </div>
                      <div class="gif_txt">
                        报表输出
                      </div>
                    </div>
                    <div class="gif_item">
                      <div class="layer31 gif_css">
                      </div>
                      <div class="gif_txt">
                        保存图片
                      </div>
                    </div>
                    <div class="gif_item">
                      <div class="layer32 gif_css">
                      </div>
                      <div class="gif_txt">
                        图像裁剪
                      </div>
                    </div>
                    <div class="gif_item">
                      <div class="layer33 gif_css">
                      </div>
                      <div class="gif_txt">
                        撤销裁剪
                      </div>
                    </div>
                    <div class="gif_item">
                      <div class="layer34 gif_css">
                      </div>
                      <div class="gif_txt">
                        手动裁剪
                      </div>
                    </div>

                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="jquery.min.js"></script>
  <script type="text/javascript">

      $(document).ready(function() {
      });
      //秒表计时器
      var milliSeconds1 = document.getElementById("span4");
      var seconds1 = document.getElementById("span3");
      var minutes1 = document.getElementById("span2");
      var hours1 = document.getElementById("span1");
      var time=0;
      var pre_time=0;
      var intervals=0;
      var pre_intervals=0;
      var flag = 0;
      function whenClick(){
          var inputValue = document.getElementById("input1");
          if(inputValue.value=="start"||inputValue.value=="continue"){
              var date= new Date();
              time = date.getTime();
              pre_time=time;
              inputValue.value="stop";
              inputValue.innerText = '停止';
              start1();
              return;
          } else {
              inputValue.value="continue";
              inputValue.innerText = '继续';
              stop1();
          }
      }
      function clear1(){
          //  清零
          stop1();
          seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
          milliSeconds1.innerHTML ="000";
          time=0;
          pre_time=0;
          intervals=0;
          pre_intervals=0;
          camera_on = 0;
          document.getElementById("input1").value = "start";
          document.getElementById("input1").innerText = '开始';
      }

      function start1(){
          //  开始/继续
          flag = setInterval("timeIncrement();",1);
      }
      function timeIncrement(){
          var date = new Date();
          intervals=date.getTime()-time+pre_intervals;
          var a=intervals%1000;
          var b=intervals%60000/1000;
          var c=intervals%3600000/60000;
          var d=intervals/3600000;
          if (camera_on == 0){
              if (b > camera_time) {
                  openCamera();
              }
          }
          var ms = Math.floor(a);
          if (a<10){
              ms = '00'+Math.floor(a);
          } else if(a<100){
              ms = '0'+Math.floor(a);
          }
          milliSeconds1.innerHTML = ms;
          console.log(ms);
          seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b));
          minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c));
          hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d));
      }

      function stop1(){
          //  暂停/停止
          var date = new Date();
          pre_intervals += date.getTime()-pre_time;
          clearInterval(flag);
      }
      //开启摄像头接口
      function openCamera(){
          camera_on = 1;
      }
      //停止摄像头接口
      function stopCamera(){
          camera_on = 0;
      }
      //秒表计时器end
      //图表数据部分
      var start_time = '1636358921201';//发令开始时间
      var camera_time = 1;//发令后n秒开启摄像头
      var camera_on = 0;//是否发送开启摄像头命令
      document.getElementById("start_time").innerHTML = time2date(start_time);

      var iframe_time = 0;//子页面返回值
      //主页面-赛道成绩分配
      window.addEventListener('message',function(event){
          //监听键盘按下时的事件
          if (lock == 1) {
              top.layer.msg('当前已锁定');return;
              return;
          }
          if (activity == 0) {
              top.layer.msg('请选择赛事');return;
              return;
          }
          iframe_time =Number(event.data['time']);
          var p = Number(event.data['code']);
          var grade =iframe_time - start_time;
          var rank = "#rank"+activity+'_'+p;
          $(`${rank}`).text(timeChange(grade));
          $(`${rank}`).attr('grade',grade);

      })
      var lock = 0;//表单锁定状态
      var activity = 0;
      var activity_name = '赛事';
      var rank_arr = [0];
      rankList();
      function rankList() {
          var result = ``;
          var name=['梦琪','忆柳','之桃','慕青','问兰','尔岚','元香','初夏','沛菡','傲珊','曼文','乐菱'];
          for (var i=1;i<=8;i++){
              result += `<tr role="row" class="rank${activity}">
            <td class="track">${i}</td>
            <td class="track">${name[i]}${activity}</td>
            <td id="rank${activity}_${i}" class="rank">00.000</td>
            <td style="display: none;" class="activity_name_${activity}">${activity_name}</td>
        </tr>`;
          }
          $('#rankList').append(result);
      }
      $(document).on('change','#activity',function(){
          var ht = $(this);
          var val = ht.val();
          if (activity != val ) {
              activity_name = ht.find("option:selected").text();
              var ac = ".activity_name_"+val;
              $(`${ac}`).text(activity_name);
              var rank_old = ".rank"+activity;
              var rank_new = ".rank"+val;
              activity = val;
              if (rank_arr.includes(activity)){
                  $(`${rank_new}`).css('display','table-row');
                  $(`${rank_old}`).css('display','none');
              } else{
                  rank_arr.push(val);
                  $(`${rank_old}`).css('display','none');
                  rankList();
              }
          }
      });

      $("#generate-excel").click(function () {
          var excel = new ExcelGen({
              "src_id": "list",
              "show_header": true
          });
          if (activity == 0) {
              top.layer.msg('请选择赛事');return;
          }
          excel.generate(activity_name);
      });
      //锁定状态修改
      function lockRank() {
          if (lock == 0) {
              $('#lock').text('解锁');
              lock = 1;
          } else {
              $('#lock').text('锁定');
              lock = 0;
          }
      }
      //时间格式转换
      function timeChange(grade){
          var a=grade%1000;
          var b=grade%60000/1000;
          var mill=(a<100)?('0'+Math.floor(a)):(Math.floor(a));
          var sec=(b<10)?('0'+Math.floor(b)):(Math.floor(b));
          return sec+'.'+mill;

      }


  </script>
</html>
